{% extends "base.html" %}
{% block title %}我的游戏库 - Wine游戏助手{% endblock %}
{% block extra_head %}
{{ filter_form.media.css }}
{% endblock %}
{% block content %}

<!-- HEADER -->
<h1>我的游戏库 <small>{{ paginator.count }} 个游戏</small>
  <span style="float: right;font-size: initial;margin-right: 1em;">
      排序
      <select id="order_by" style="color:black;"
              data-filter="{{ filter_string }}"
              onchange="changeLibraryOrderBy();">
        <option value="name" {% if order_by == 'name' %} selected {% endif %}>名称 &uarr;</option>
        <option value="-name" {% if order_by == '-name' %} selected {% endif %}>名称 &darr;</option>
        <option value="year" {% if order_by == 'year' %} selected {% endif %}>年份 &uarr;</option>
        <option value="-year" {% if order_by == '-year' %} selected {% endif %}>年份 &darr;</option>
        <option value="popularity" {% if order_by == 'popularity' %} selected {% endif %}>热度 &uarr;</option>
        <option value="-popularity" {% if order_by == '-popularity' %} selected {% endif %}>热度 &darr;</option>
        <option value="created" {% if order_by == 'created' %} selected {% endif %}>创建日期 &uarr;</option>
        <option value="-created" {% if order_by == '-created' %} selected {% endif %}>创建日期 &darr;</option>
        <option value="updated" {% if order_by == 'updated' %} selected {% endif %}>更新日期 &uarr;</option>
        <option value="-updated" {% if order_by == '-updated' %} selected {% endif %}>更新日期 &darr;</option>
      </select>
  </span>
</h1>
{% if is_paginated %}
  <div class="row">
    <div class="col-md-12">
      <span style="line-height: 33px;">第 {{ page_obj.start_index }} - {{ page_obj.end_index }} 个游戏，共 {{ paginator.count }} 个</span>
      <span style="float: right;">
          每页
          <select id="paginate_by" style="color:black;"
                  data-filter="{{ filter_string }}"
                  onchange="changeLibraryPaginateCount();">
            <option value="25" {% if paginate_by == '25' %} selected {% endif %}>25</option>
            <option value="50" {% if paginate_by == '50' %} selected {% endif %}>50</option>
            <option value="100" {% if paginate_by == '100' %} selected {% endif %}>100</option>
          </select>
          条
      </span>
    </div>
  </div>
  {% include 'includes/library_paginator.html' %}
{% endif %}

<div class="row">
  <div class="col-sm-9">
    <ul class="game-list user-library">
      {% for game in games %}
        {% include "includes/game_preview.html" %}
      {% endfor %}
    </ul>
  </div>
  <div class="col-sm-3">
    <div class="panel panel-default no-border">
      <div class="panel-body" style="background-color:#444;">
        <form action="{% url 'library_show' username=user.username %}" method="get" id="library_filter_form">
          {{ filter_form.as_p }}
          <input type="button" value="筛选" class="btn btn-default no-border"
                 onclick="applyLibraryFilter();">
          <input type="button" value="清除" class="btn btn-default no-border"
                 style="margin-left: 10px;"
                 onclick="clearLibraryFilter();">
        </form>
      </div>
    </div>
  </div>
</div>

{% if page_obj.has_other_pages %}
  {% include 'includes/library_paginator.html' %}
{% endif %}
{% endblock %}

{% block scripts %}
  {{ block.super }}
  {{ filter_form.media.js }}
{% endblock %}
